<template>
  <div class="container">
    <div class="leftcontainer">
      <!-- 动态背景 -->
      <video-bg
        :sources="[require('@/assets/vedio/tingshibackground.mp4')]"
        img="src/assets/guanzhu.png"
      >
        <!-- 搜索框 -->
        <div class="search-box">
          <input
            class="search-txt"
            type="text"
            placeholder="请输入诗歌题目"
            v-model="title"
          />
          <div class="search-btn" @click="changeContent()">
            <svg
              t="1656464892071"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="15156"
              width="96"
              height="96"
            >
              <path
                d="M277.8112 236.8512c103.97696-103.97696 272.54784-103.97696 376.5248 0a266.12736 266.12736 0 0 1 68.16768 259.9936 30.72 30.72 0 1 1-59.1872-16.49664 204.6976 204.6976 0 0 0-52.4288-200.04864c-79.9744-79.9744-209.65376-79.9744-289.62816 0-79.9744 79.9744-79.9744 209.64352 0 289.62816a204.88192 204.88192 0 0 0 232.07936 40.52992 204.36992 204.36992 0 0 0 57.5488-40.52992 30.72 30.72 0 0 1 43.43808 0l202.752 202.74176a30.72 30.72 0 0 1-43.44832 43.43808L631.36768 633.856a264.77568 264.77568 0 0 1-51.85536 32.18432c-100.7616 47.44192-221.66528 27.37152-301.70112-52.67456-103.97696-103.96672-103.97696-272.5376 0-376.5248z"
                fill="#ed804b"
                p-id="15157"
              ></path>
            </svg>
          </div>
        </div>
        <!-- 暂停按钮 -->
        <a-tooltip placement="top" title="暂停">
          <span class="playStyle" @click="pause">
            <img src="../../assets/stop.png" width="25" height="25" />
          </span>
        </a-tooltip>
        <!-- 播放按钮 -->
        <a-tooltip placement="top" title="播放">
          <span class="playStyle" @click="play(this.voiceName)">
            <img src="../../assets/play.png" width="25" height="25" />
          </span>
        </a-tooltip>
        <!-- 详情按钮 -->
        <a-tooltip placement="top" title="详情">
          <span
            class="playStyle"
            @click="viewdetails(content.title, content.author, content.theme)"
          >
            <img src="../../assets/detail.png" width="25" height="25" />
          </span>
        </a-tooltip>
        <!-- 调节发音人 -->
        <div class="adjustvedio">
          <a-select
            ref="select"
            :value="voiceName"
            style="width: 120px"
            :options="options1"
            @change="handleChange"
          ></a-select>
        </div>
        <!-- 诗词 -->
        <div class="cont">
          <!-- 标题 -->
          <h2 style="font-weight: bold">{{ content.title }}</h2>
          <!-- 作者 朝代 -->
          <span class="source">{{ content.author }} {{ content.dynasty }}</span>
          <!-- 诗词内容 -->
          <div class="contson">
            <div style="white-space: pre-wrap">{{ content.content }}</div>
          </div>
        </div>
      </video-bg>
    </div>
    <div class="rightcontainer">
      <div class="tuijianhead">
        <div class="titleleft"></div>
        推荐诗词
      </div>
      <div class="tuijiancolumn1">
        <img
          style="margin-left: 5px; cursor: pointer"
          src="../../assets/tuijian1.jpg"
          width="195"
          height="260"
          @click="
            changetitle('天净沙·秋思');
            changeContent();
          "
        />
        <img
          style="margin-left: 5px; cursor: pointer"
          src="../../assets/tuijian2.jpg"
          width="195"
          height="260"
          @click="
            changetitle('泊秦淮');
            changeContent();
          "
        />
        <img
          style="margin-left: 5px; cursor: pointer"
          src="../../assets/tuijian3.jpg"
          width="195"
          height="260"
          @click="
            changetitle('秋夕');
            changeContent();
          "
        />
      </div>
      <div class="tuijiancolumn2">
        <img
          style="margin-left: 5px; cursor: pointer"
          src="../../assets/tuijian4.jpg"
          width="195"
          height="260"
          @click="
            changetitle('秋思');
            changeContent();
          "
        />
        <img
          style="margin-left: 5px; cursor: pointer"
          src="../../assets/tuijian5.jpg"
          width="195"
          height="260"
          @click="
            changetitle('离思五首·其四');
            changeContent();
          "
        />
        <img
          style="margin-left: 5px; cursor: pointer"
          src="../../assets/tuijian6.jpg"
          width="195"
          height="260"
          @click="
            changetitle('雪梅');
            changeContent();
          "
        />
      </div>
    </div>
  </div>
</template>
<script>
import TtsRecorder from "../../assets/js/audio.js";
import VideoBg from "vue-videobg";
import { ref } from "vue";
const ttsRecorder = new TtsRecorder();
export default {
  name: "TingShi",
  components: {
    VideoBg,
  },
  setup() {
    const inputValue1 = ref(1);
    return {
      inputValue1,
    };
  },
  data() {
    return {
      text: "暂无播放内容",
      content: "",
      voiceName: "xiaoyan",
      speed: 10,
      voice: 60,
      pitch: 50,
      title: "",
      options1: [
        {
          value: "xiaoyan",
          label: "讯飞小燕",
        },
        {
          value: "x2_qianxue2",
          label: "讯飞千雪",
        },
        {
          value: "aisjiuxu",
          label: "讯飞许久",
        },
        {
          value: "aisxping",
          label: "讯飞小萍",
        },
        {
          value: "aisjinger",
          label: "讯飞小婧",
        },

        {
          value: "x2_xiaofei",
          label: "合肥话",
        },
        {
          value: "x2_xiaorong",
          label: "四川话",
        },
        {
          value: "x2_xiaoqiang",
          label: "湖南话",
        },
        {
          value: "x2_SuhCn_XiXi",
          label: "苏州话",
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      this.voiceName = value;
    },
    play(voiceName) {
      ttsRecorder.setParams({
        // 文本内容
        text: this.text,
        // 角色
        voiceName: voiceName,
        // 语速
        speed: 35,
        // 音量
        voice: 50,
      });
      ttsRecorder.start();
    },
    pause() {
      ttsRecorder.stop();
    },
    changetitle(title) {
      this.title = title;
    },
    changeContent() {
      this.$axios({
        method: "get",
        url: "/poetry/getOntByTitle?title=" + this.title,
      })
        .then((res) => {
          this.content = res.data.data;
          this.text =
            this.content.title +
            this.content.dynasty +
            this.content.author +
            this.content.content;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    viewdetails(title, author, theme) {
      this.$router.push({
        path: `/poemcontent/${title}/${author}/${theme}`,
      });
    },
  },
  mounted() {
    this.title = "送友人";
    this.changeContent();
    this.$emit("tellFather", { index: 2 });
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  background-color: #f6f6f6;
  overflow: hidden;
}
.leftcontainer {
  width: 50%;
  height: 100%;
}

.search-box {
  position: absolute;
  top: 5px;
  left: 10px;
  background-image: linear-gradient(to right, #ffe5c1 0%, #f0a4a7 100%);
  /* background: #2f3640; */
  border-radius: 40px;
  padding: 10px;
}
.search-box:hover > .search-txt {
  width: 240px;
  padding: 0 6px;
}
.search-box:hover > .search-btn {
  background: white;
}
.search-btn {
  color: #e47c63;
  float: right;
  width: 30px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #ffe5c1 0%, #f0a4a7 100%);
  /* background: #2f3640; */
  display: flex;
  transition: 0.4s;
  justify-content: center;
  align-items: center;
}
.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #4c4c4c;
  margin-left: 5px;
  font-size: 16px;
  transition: 0.4s;
  line-height: 30px;
  width: 0px;
}
.icon {
  width: 25px;
  height: 30px;
}
.playStyle {
  float: right;
  margin-right: 12px;
  margin-top: 20px;
  cursor: pointer;
}

.adjustvedio {
  float: right;
  margin-right: 13px;
  margin-top: 18px;
}

.tuijianhead {
  height: 45px;
  background-color: #fff;
  box-shadow: 2px 2px 10px 2px #ddd;
  clear: both;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}
.titleleft {
  height: 21px;
  width: 3px;
  margin-left: 10px;
  float: left;
  clear: left;
  background-color: #a2c241;
  margin-right: 8px;
}
.tuijiancolumn1 {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
  margin-bottom: 60px;
}
.tuijiancolumn2 {
  margin-bottom: 60px;
  display: flex;
  justify-content: space-around;
}
.cont {
  height: 80%;
  clear: both;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 200%;
  overflow: hidden;
}
.cont .source {
  font-size: 13px;
  color: #65645f;
  margin-bottom: 10px;
  line-height: 200%;
}
.cont .contson {
  clear: both;
  font-size: 17px;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 200%;
}
.rightcontainer {
  width: 50%;
  height: 90%;
}
</style>
